<template>
    <div id="empty" >
        <div class="flex-center emptyDiy" v-if="online && isEmptyDiy">
            <div class="lookLeft ">
                <img src="../../assets/img/home/lookLeft.png" alt="">
            </div>
            <div class="emptyDiyRes ">
                <img src="../../assets/img/home/emptyRes.png" alt="">
                <div style="color: #303133;font-size: 24px;font-weight: bold;margin-top: 15px;" >暂无课程</div>
                <div style="margin-top: 10px;"><span style="color: #909399;;">点击左侧“创建课程目录”按钮新建一个课程目录吧</span></div>
            </div>
        </div>
        
        <div class="flex-center" v-if="online && !isEmptyDiy">
            <div class="emptyRes">
                <img src="../../assets/img/home/emptyRes.png" alt="">
                <div style="color: #303133;font-size: 24px;font-weight: bold;margin-top: 15px;" >暂无课程内容</div>
                <div style="margin-top: 10px;"><span style="color: #909399;;">如何制作课程内容？</span><span style="color:#0085FF;cursor: pointer;" @click="lookCreatCourse">点击查看 ></span></div>
            </div>
        </div>
        <div class="container flex-center" v-if="online && !isEmptyDiy">
            <div @click="upload(0)">
                <div class="img-container flex-center pointer">
                    <img class="adjust" src="../../assets/img/home/ppt.png" alt="">
                </div>
                <div class="align-center pointer">
                    <span class="s-22 main-tips pointer">导入课件</span>
                    <span class="s-14 t-color-c pointer">支持本地PPT导出</span>
                </div>
            </div>
            <div style=" margin: 0 112px;" @click="upload(1)">
                <div class="img-container flex-center pointer">
                    <img class="adjust" src="../../assets/img/home/video.png" alt="">
                </div>
                <div class="align-center pointer">
                    <span class="s-22 main-tips pointer">导入多媒体</span>
                    <span class="s-14 t-color-c pointer">支持本地音视频、文档等导入</span>
                </div>
            </div>
            <div @click="goResource">
                <div class="img-container flex-center pointer">
                    <img src="../../assets/img/home/resource-em.png" alt="">
                </div>
                <div class="align-center pointer">
                    <span class="s-22 main-tips pointer">资源中心</span>
                    <span class="s-14 t-color-c pointer">资源中心查找资源</span>
                </div>
            </div>
        </div>
        <div v-if="!online">
            <div class="notSrc">
                <img class="res-empty" src="../../assets/img/home/error-line.png" alt="">
                <div class="s-16">网络异常，请检查您的网络连接 !</div>
            </div>
        </div>
    </div>
</template>

<script>
import { SqlLibBook } from '../../../../../static/lib/sqlite/service/SqlLibBook'
import { SqlLib } from "../../../../../static/lib/sqlite/SqlLib";
import { SqlLibUser } from "../../../../../static/lib/sqlite/service/SqlLibUser";
import bus from '../../assets/js/bus'
import usermeta from '@/content/api/usermeta'
export default {
    props: ['sqlParams'],
    data() {
        return {
            online: '',
            isEmptyDiy:false,
        }
    },
    mounted() {
        this.online = localStorage.isOffline === 'false'
        this.getAllDiy()
        bus.$on('colseCreateLesson', () => {
            this.getAllDiy()
        })
        bus.$on('emptyDiy', () => {
            console.log('emptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiyemptyDiy');
            this.isEmptyDiy = true
        })
    },
    methods: {
        lookCreatCourse(){
            var creatCatalogUrl = 'https://open.beautyofscience.cn/jy/index.html#/playvideo?fileId=1615642869031305216'
            const shell = require('electron').shell;
            shell.openExternal(creatCatalogUrl)
        },
        getAllDiy(){
            if (localStorage.isOffline && localStorage.isOffline == 'false'){
                usermeta.getAllDiyLessons({ //获取我的课程
                    appkey:'NOVO_EDU_BEAUTY_SCIENCE_PC'
                }).then(res=>{
                    if (res.returnValue.length > 0) {
                        this.isEmptyDiy = false
                    }else{
                        this.isEmptyDiy = true
                    }
                })
            }else{
                let sqlLib = SqlLib.getInstance(window.$DBDIR)
                let user = SqlLibUser.queryCurrentUser(sqlLib)
                let resultBook = SqlLibBook.queryChapterLessonByBookId(sqlLib, user.id)
                console.log('resultBook',resultBook);
                if (resultBook == null) {
                    this.isEmptyDiy = true
                }else{
                    this.isEmptyDiy = false
                }
            }
        },
        goResource(){
            if (this.sqlParams.bookId == this.sqlParams.userId && this.sqlParams.lessonId == '') {
                this.$message.warning('请先创建课程')
                return
            }
            this.$router.push({name:'cloud',params:{lessonId:this.sqlParams.lessonId}}) 
        },
        upload(type) {
            if (this.sqlParams.bookId == this.sqlParams.userId && this.sqlParams.lessonId == '') {
                this.$message.warning('请先创建课程')
                return
            }
            this.$showOpenDialog(type, this.sqlParams,this.uploadCompleted)
        },
        uploadCompleted() {
            bus.$emit('initDiyLesson', this.sqlParams.lessonId) 
        },
    }
}
</script>

<style lang="scss">
#empty {
    width: 100%;
    height: calc(100vh - 154px);
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    .lookLeft{
        position: absolute;
        top:calc(50% - 54px);
        left: 52px;
        img{
            width: 96px;
            height: 54px;
        }
    }
    .emptyDiy{
        // width: 100%;
        // position: absolute;
        // top: 50%;
        // left:52px;
        // height: calc(100% - 64px);
    }
    .emptyDiyRes{
        position: absolute;
        top:calc(50% - 143px);
        left:calc(50% - 180px);
        img{
            width: 180px;
            height: 143px;
        }
        text-align: center;
    }
    .main-tips {
        display: inline-block;
        margin-top: 22px;
        margin-bottom: 15px;
    }
    .emptyRes{
        text-align: center;
        img{
            width: 180px;
            height: 143px;
        }
        margin: 50px auto 0px;
    }
    .container{
        margin-top: 60px;
        padding: 60px 0 54px;
        background: #F2F7FC;
    }
    .img-container {
        width: 13.89vw;
        height: 13.89vw;
        max-width: 160px;
        max-height: 160px;
        background-color: #fff;
        border-radius: 50%;
        .adjust {
            margin-left: 13px;
            margin-top: 13px;
        }
        img {
            width: 8.33vw;
            height: 8.33vw;
            max-width: 83px;
            max-height: 83px;
        }
    }
    .notSrc {
        position: absolute;
        text-align: center;
        font-weight: bold;
        top: calc(50% - 240px);
        left:calc(50% - 180px);
        .res-empty {
            width: 360px;
            height: 360px;
        }
    }
}
@media screen and(max-width:1439px) {
    #empty {
        height: calc(100vh - 136px);
    }
}
</style>